<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3幽灵按钮</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
	<script src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
	<div class="box">
		<div class="link link-miss">
			<a href="##" class="button" data="My mission is clear">HOME
				<span class="line line-top"></span>
				<span class="line line-right"></span>
				<span class="line line-bottom"></span>
				<span class="line line-left"></span>
			</a>
		</div>
		<div class="link link-play">
			<a href="##" class="button" data="This is my playgroup">ABOUT<i class="fa fa-arrow-circle-right moveRT"></i>
				<span class="line line-top"></span>
				<span class="line line-right"></span>
				<span class="line line-bottom"></span>
				<span class="line line-left"></span>
			</a>

			<ul class="ul">
				<li><span></span></li>
				<li><a href="##">Group</a></li>
				<li><a href="##">Teamwork Spirit</a></li>
			</ul>
		</div>
		<div class="link link-touch">
			<a href="##" class="button" data="This is my Touch demo">NEWS<i class="fa fa-arrow-circle-right moveRT"></i>
				<span class="line line-top"></span>
				<span class="line line-right"></span>
				<span class="line line-bottom"></span>
				<span class="line line-left"></span>
			</a>

			<ul class="ul">
				<li><span></span></li>
				<li><a href="##">School's Life</a></li>
				<li><a href="##">Club Events</a></li>
				<li><a href="##">Winners List</a></li>
			</ul>
		</div>
		<div class="link link-touch">
			<a href="##" class="button" data="This is my Touch demo">CONTACT
				<span class="line line-top"></span>
				<span class="line line-right"></span>
				<span class="line line-bottom"></span>
				<span class="line line-left"></span>
			</a>
		</div>
		<!-- <div class="tip">
			<em></em>
			<span></span>
		</div> -->
	</div>
	<script type="text/javascript">
		$(function(){
			$(".button:not(:has(i))").css({
				textAlign: 'center',
				padding:'0',
				transition:'none'
			})
			$(".button").next().hide();


			$(".link").hover(function() {
					// $(this).next().slideDown(300);
					$(this).find('ul').slideDown(300);
			}, function() { 
					$(this).find('ul').stop(true).slideUp(300);
			});

		})
	</script>
</body>
</html>